import React from 'react'
import {withRouter} from 'react-router';
import {Route, BrowserRouter, Link} from 'react-router-dom'

const HelloWorld = ()=> {
    return <div>HelloWorld</div>
}

const Index = ()=> {
    return <div>Index</div>
}

const About = ()=> {
    return <div>About</div>
}

const BasicApp = ()=> {
    return <BrowserRouter basename="course01">
        <div>
            <ul>
                <li><Link to="/">Index</Link></li>
                <li><Link to="/hello">HelloWorld</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
            <Route path="/" exact component={Index}></Route>
            <Route path="/hello" component={HelloWorld}></Route>
            <Route path="/about" component={About}></Route>
        </div>
    </BrowserRouter>
}
export default BasicApp

// 使用 Link 才能正确将一个超链接正确链接到某一个目标 Route。
// Router 里面的一个 Route 配置就相当于一个页面, 当 url 与该 Route 的 path 配置相匹配时就渲染这个 Route 的组件。
